import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

import Config from '../../config';
import CommonDataListView from '../common/CommonDataListView';
import CommonViewPagerOne from '../common/CommonViewPagerOne';
import TImage from '../../components/TImage';
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import Constants from '../../common/Constants';
import ZHP_RequestPostsAction from '../../actions/zahuopu/ZHP_RequestPostsAction';
import ZHP_Constants from './ZHP_Constants';
import ZHP_PostItemView from './ZHP_PostItemView';

//排序方式，1最新，2最热, 3点赞
const TYPE_DATA = [
  {key:"hot", name:"回答热榜", sort_id:2, source:require("../../../resource/images/zahuopu/icon_hotrank.png"),
    width:31, height:28},
  {key:"new", name:"最新问题", sort_id:1, source:require("../../../resource/images/zahuopu/icon_question.png"),
    width:35, height:30},
];

export default class ZHP_NewView extends CommonDataListView {
  constructor(props) {
    super(props);

    this._viewPager = null;
    this._noEmpty = true;
    this.state.hotData = [];
    this.state.newData = [];
    this.state.isListUpdate = false;
    this.state.sort_id = 0;
    this._useLoadMore = false;
  }

  _dealComponentWillUpdate(nextProps, nextState) {
    if(nextState.isListUpdate) {
      nextState.isListUpdate = false;
      //new
      if(nextState.sort_id === 1) {
        nextState.newData = nextState.data;
        // nextState.newData.push({sub_tag:1, title:"111111", content:"111111111111111111", comments_num:"1111",
        //   readers_num:"1111"});
        // nextState.newData.push({sub_tag:2, title:"222222", content:"222222222222222222", comments_num:"2222",
        //   readers_num:"2222"});
        // nextState.newData.push({sub_tag:3, title:"333333", content:"333333333333333333", comments_num:"3333",
        //   readers_num:"3333"});
      }
      //hot
      else if(nextState.sort_id === 2) {
        nextState.hotData = nextState.data;
        // nextState.hotData.push({sub_tag:1, title:"111111", content:"111111111111111111", comments_num:"1111",
        //   readers_num:"1111"});
        // nextState.hotData.push({sub_tag:2, title:"222222", content:"222222222222222222", comments_num:"2222",
        //   readers_num:"2222"});
        // nextState.hotData.push({sub_tag:3, title:"333333", content:"333333333333333333", comments_num:"3333",
        //   readers_num:"3333"});
      }
    }
  }

  _onRenderHeader() {
    return(
      <View style={{flexDirection:"column",
          paddingTop:SizeUtils.translateDesignWidthToCode(20),
          backgroundColor:"#ffffff"}}>
        {this._renderSmallPager()}
        {this._renderHotView()}
        {this._renderNewView()}
      </View>
    )
  }

  _renderSmallPager() {
    return (
    <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.translateDesignWidthToCode(300),
          // paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          // paddingRight:SizeUtils.translateDesignWidthToCode(40),
          paddingTop:SizeUtils.translateDesignHeightToCode(36),
          justifyContent:"center", alignItems:"center",
        }}>
        <CommonViewPagerOne home={this.props.home} ref={(ref) => this._viewPager = ref} type={Constants.SLIDER_TYPE.ZHP_NEW}
          style={{width:SizeUtils.translateDesignWidthToCode(670),
            height:SizeUtils.translateDesignWidthToCode(300)}} />
      </View>
    )
  }

  _renderHotView() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(38), flexDirection:"column"}}>
        {this._renderTitle(0)}
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(12)}}>
          {this.state.hotData.map(
            (data, index) => {return this._renderHotItem(data, index);}
          )}
        </View>
      </View>
    )
  }

  _renderHotItem(data, index) {
    return (
      <ZHP_PostItemView data={data} key={index}/>
    )
  }

  _renderTitle(index) {
    let data = TYPE_DATA[index];
    return (
      <View style={{flexDirection:"row", alignItems:"center", justifyContent:"space-between",
          paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),}}>
        <View style={{flexDirection:"row", alignItems:"center"}}>
          <TImage source={data.source} style={{width:data.width, height:data.height}}/>
          <Text style={{paddingLeft:SizeUtils.translateDesignWidthToCode(18), color:"#333333",
              fontSize:SizeUtils.translateFontSizeToCode(30)}}>
            {data.name}
          </Text>
        </View>
        <TouchableOpacity style={{flexDirection:"row", alignItems:"center",}}
            onPress={() => this._onPressMore(data.sort_id)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30), color:"#999999"}}>
            更多
          </Text>
          <TImage source={require("../../../resource/images/common/list_btn_forward.png")}
            style={{width:16, height:28, paddingLeft:SizeUtils.translateDesignWidthToCode(16)}}/>
        </TouchableOpacity>
      </View>
    )
  }

  _renderNewView() {
    return (
      <View style={{flexDirection:"column", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
        {this._renderTitle(1)}
        <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(10)}}>
          {this.state.newData.map(
            (data, index) => {return this._renderNewItem(data, index);}
          )}
        </View>
      </View>
    )
  }

  _renderNewItem(data, index) {
    return (
      <ZHP_PostItemView data={data} key={index}/>
    )
  }

  _onPressItem(data) {
    this.gotoPage(Config.pages.zhp_content, data);
  }

  _onPressMore(sort_id) {
    this.gotoPage(Config.pages.zhp_list, {sort_id:sort_id})
  }

  _requestData(page, listView) {
    this._viewPager.doRefresh();
    this._requestNewData();
    this._requestHotData();
    let timer = setTimeout(()=>{
     clearTimeout(timer);
     this._pullRefresh.finish(1, null);
   }, 1000);
  }

  _requestNewData() {
    new ZHP_RequestPostsAction().call(this, {page:1, page_size:8, tag:0, sort_id:1});
  }

  _requestHotData() {
    //new ZHP_RequestPostsAction().call(this, {page:1, page_size:3, tag:0, sort_id:2});
  }
}
